<template>
	<view class="integral">
		<view class="head">
		  <view class='head_01'>我的积分&emsp;<text class="iconfont icon-tishi" ></text></view>
		  <view class='head_02'>0</view>
		  <view class='yanz'>
		      <view class='yanz_l' >
		        <view class='y_s'><text class="iconfont icon-liwu" ></text></view>
		        &nbsp;我的兑换
		      </view>
		      <view class='yanz_l' >
		        <view class='y_s'><text class="iconfont icon-dingdan" ></text></view>
		        &nbsp;积分明细
		      </view>
		      
		  </view>
		  <view class='btn'>
		      立即签到赚积分 
		      <view class='btn_icon'> <text class="iconfont icon-right" ></text></view>
		  </view>
		</view>
		<view class="more">
		  <view class='mo' >
		    <view class='mo_01'>兑换优惠券</view>
		  </view>
		</view>
		<view class='coupon'>
		  <view class='coupon_01'>
		    <view class='coupon_01_l'>
		      <view class='coupon_01_l_1'>¥<span>10.00</span></view>
		      <view class='coupon_01_l_2'>满80.00元可用</view>
		    </view>
		    <view class='coupon_01_r'>立<br/>即<br/>兑<br/>换</view>
		  </view>
		  <view class='coupon_01'>
		    <view class='coupon_01_l'>
		      <view class='coupon_01_l_1'>¥<span>10.00</span></view>
		      <view class='coupon_01_l_2'>满80.00元可用</view>
		    </view>
		    <view class='coupon_01_r'>立<br/>即<br/>兑<br/>换</view>
		  </view>
		</view>
		<view class='BH10'></view>
		<view class="yhg_tit">
		    <view class='mo_01'>优惠购专区</view>
		</view>
		<view class='yhg'>
		  <view class='yhg_01'>
		     <text class="iconfont icon-app" style="font-size: 28px;"></text>
		    <view>全部</view>
		  </view>
		  <view class='yhg_02'>
		    <view style='visibility:hidden;'><text class="iconfont icon-app" style="font-size: 28px;"></text></view>
		    <view>日用</view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.integral{background-color: #fff;min-height: 100vh;
	.head{background-color: #332F2C;padding: 15px 10px 20px;position: relative;}
	.head_01{text-align: center;color: #8A8585;}
	.head_02{font-size: 24px;color: #E5B58E;text-align: center;padding-top: 10px;}
	.yanz {
	  display: flex;
	  color: #D1CDC9;
	  text-align: center;
	  padding: 15px 0;
	  font-size: 16px;
	}
	.y_s{margin: 2px 5px 0 0}
	.yanz_l {
	  width: 50%;
	  display: flex;justify-content: center;
	}
	.btn{position: absolute;bottom: -17px;left:30%;background-color: #FA6B43;color: #FED5B2;padding: 8px 25px;border-radius: 20px;display: flex;}
	.btn_icon{padding-top: 2px;}
	.mo{padding: 25px 10px 10px 10px;}
	.mo_01{padding-left: 10px;box-sizing:border-box;width: 80%;height: 25px;overflow: hidden;border-left:2px solid #F3A67E;font-size: 16px;line-height: 25px;}
	.coupon{display: flex;padding: 10px 10px 20px;}
	.coupon_01{display: flex;margin-right: 10px;width: 120px;background-color: #FC8819;color: #FCF7F5;justify-content: space-between;padding: 10px 0 10px 10px;}
	.coupon_01_l{width: 75%;}
	.coupon_01_l_1{text-align: center;border-bottom: 1px solid #FABC7D;line-height: 28px;}
	.coupon_01_l_1 span{font-size: 22px;}
	.coupon_01_l_2{font-size: 10px;text-align: center;padding-top: 6px;}
	.coupon_01_r{width: 20%;font-size: 10px;text-align: center;line-height: 14px;}
	.BH10{background-color: #F7F7F7;height: 10px;}
	.yhg_tit{padding: 10px;}
	.yhg{display: flex;padding: 8px 10px;border-bottom: 1px solid #ECECEC;border-top: 1px solid #ECECEC;}
	.yhg_01{width: 20%;text-align: center;font-size: 12px;color: #FC881A;}
	.yhg_02{width: 20%;text-align: center;font-size: 12px;}
}
</style>
